<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据脑图制作PPT</title>
    <link type="text/css" rel="stylesheet" href="./css/jsmind.css" />
    <link href="./css/css.css" type="text/css" rel="stylesheet" />
    <link href="./css/base.css" type="text/css" rel="stylesheet" />

    <style type="text/css">
        #jsmind_container{
            width:800px;
            height:500px;
            border:solid 1px #ccc;
            /*background:#f4f4f4;*/
            background:#f4f4f4;
        }
    </style>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    
    
    <!-- 编辑器引用的文件 start-->
    <!--  
    <script egret="lib" src="./TGTemplate/libs/modules/egret/egret.min.js"></script>
	<script egret="lib" src="./TGTemplate/libs/modules/egret/egret.web.min.js"></script>
	<script egret="lib" src="./TGTemplate/libs/modules/res/res.min.js"></script>
	<script type="text/javascript" src="./TGTemplate/resource/shortcut/shortcut.js"></script>
    <script type="text/javascript" src="./TGTemplate/main.min.js"></script>
     -->
     <script type="text/javascript" src="./TGTemplate/tg_core.min.js"></script>
    <!-- 编辑器引用的文件 end-->
    

    <!-- context menu start
    <link rel="stylesheet" type="text/css" href="../contextMenu/jquery.contextMenu.min.css">
    <script type="text/javascript" src="../contextMenu/jquery.contextMenu.min.js"></script>
    <script type="text/javascript" src="../contextMenu/jquery.ui.position.min.js"></script>
    -->
    <!-- context menu end-->

    <!-- excanvas start-->
    <!--[if IE]><script type="text/javascript" src="./canvas/excanvas.js"></script><![endif]-->
    <!-- excanvas end-->

</head>
<body>

<!-- 右侧编辑区域 -->
<div style="width:350px;height:500px;float:right;">
	<!-- 题纲编辑器－－数据版本号 -->
	<div id="version_div" style="border:solid 1px #ccc;">
		数据版本：<label id="version_p"/>
	</div>
	<!-- 题纲编辑器－－设置可选项和保留项 -->
	<div id="tg_div" style="border:solid 1px #ccc;display:none;">
		<div style="border:solid 1px #ccc;">
			节点选项：
			<input type="checkbox" id="optional" name="optional" value="optional" onchange="optionalChange(this)">可选项</input>
			<input type="checkbox" id="preserve" name="preserve" value="preserve" onchange="preserveChange(this)">保留项</input>
		</div>
		
		<br/>
		<br/>
	</div>
	
	<!-- 分页编辑器－－设置分页信息 -->
	<div id="map_div" style="border:solid 1px #c00;display:none;">
		<div style="border:solid 1px #ccc;">
			节点所在的页：
			<ul id="pageNumberList">
				<li><input type="checkbox" name="0" value="0" onchange="pageCheckChange(this)">第1页</input></li>
				<li><input type="checkbox" name="1" value="1" onchange="pageCheckChange(this)">第2页</input></li>
				<li><input type="checkbox" name="-1" value="-1" onchange="pageCheckAllChange(this)">全选</input></li>
			</ul>
		</div>
	</div>
	
</div>


<!-- canvas容器 -->
<div id="jsmind_container" class="context-menu-one" sytle="width:50%;"></div>

<!-- test button -->
<input type="button" value="test" onclick="test()"/>


<!-- 分页弹窗 start -->
<div class="tanchu_black"></div>
<div class="delete_reform" id="pageWindow">
    <a href="javascript:void(0)" class="delete_close"></a>
    <div class="msg_con">
        请选择节点所在的页<select class="page_list"></select>
        <a href="javascript:selectOnePage()" class="close_none">确定</a>
    </div>
</div>
<script>
    // 显示分页窗口，
    // 参数：curPage 当前页码，0表示无效，1表示首页
    // 参数：pageCount 总页数
    // 参数：callback 选择后的回调,页码作为参数，0表示无效，1表示首页
    var selectPageCallback = null;
    function showPageWindow(curPage,pageCount,callback) {
        selectPageCallback=callback;

        $('.page_list').html('');
        for(var i=0;i<pageCount+1;i++){
            var p = i==0?"无":i;
            var s = p==curPage?' selected="selected" ':'';
            var str = '<option value ="'+i+'" '+s+'>'+p+'</option>';
            $('.page_list').append(str);
        }

        $("#pageWindow,.tanchu_black").show();
    }
    function closePageWindow() {
        $('#pageWindow,.tanchu_black').hide();
    }
    $(".delete_close,.close_none").click(function() {
        $('#pageWindow,.tanchu_black').hide();
    });
    // 选择一个页
    function selectOnePage(){
        var p = $('.page_list').val();
        if(selectPageCallback){
            selectPageCallback(p);
        }
    }
</script>
<!-- 分页弹窗 end -->

<!-- 编组属性弹窗 start -->
<div class="tanchu_black"></div>
<div class="delete_reform" id="groupWindow">
    <a href="javascript:void(0)" class="delete_close"></a>
    <div class="msg_con">
        是否为编组<select class="group_child_list">
        			<option value="0">否</option>
        			<option value="1">是</option>
        </select>
        <a href="javascript:selectChildCount()" class="close_none">确定</a>
    </div>
</div>
<script>
    // 显编组属性窗口，
    // 参数：curPage 当前页码，0表示无效，1表示首页
    // 参数：pageCount 总页数
    // 参数：callback 选择后的回调,页码作为参数，0表示无效，1表示首页
    var selectGroupCallback = null;
    function showGroupWindow(node,callback) {
    	selectGroupCallback=callback;
    	
    	// (0根节点/1数组/2结构体/3叶节点)
    	var curPage = 0;
    	if(node.kind == 1){
    		$(".group_child_list").val("1");
    	}else{
    		$(".group_child_list").val("0");
    	}

    	

        $("#groupWindow,.tanchu_black").show();
    }
    function closeGroupWindow() {
        $('#groupWindow,.tanchu_black').hide();
    }
    $(".delete_close,.close_none").click(function() {
        $('#groupWindow,.tanchu_black').hide();
    });
    // 选择一个页
    function selectChildCount(){
        var p = $('.group_child_list').val();
        if(selectGroupCallback){
        	selectGroupCallback(p);
        }
    }
</script>
<!-- 编组属性弹窗 end -->

<!-- 题纲模式－－设置属性弹窗 start -->
<div class="tanchu_black"></div>
<div class="delete_reform" id="setAttributeWindow">
    <a href="javascript:void(0)" class="delete_close"></a>
    <div class="msg_con">
        请选择节点类型：<select class="type_list"  onchange="type_list_change();"></select><br>
        最大字数(文字时有效)<input disabled="disabled" class="text_limit" type="text" value="" style="width:20px;"/>
        <a href="javascript:setAttributeOfNode()" class="close_none">确定</a>
    </div>
</div>
<script>
    // 显示属性窗口，
    // 参数：node 节点
    // 参数：callback 选择后的回调,
    var setAttributeCallback = null;
    function showSetAttributeWindow(node,callback) {
    	setAttributeCallback=callback;
		// 自身（不包含子）的表现形式1(0无/1文字/2图片/3图表/4表格)
		var t_list = ['无','1文字','2图片','3图表','4表格'];
        $('.type_list').html('');
        for(var i=0;i<t_list.length;i++){
            var p = t_list[i];
            var s = i==node.type?' selected="selected" ':'';
            var str = '<option value ="'+i+'" '+s+'>'+p+'</option>';
            $('.type_list').append(str);
        }
        // 显示文字最大字数
        showTextLimit(node.type, node.value.max);

        $("#setAttributeWindow,.tanchu_black").show();
    }
    // 类型变化函数
    function type_list_change(){
    	var type = $('.type_list').val();
    	showTextLimit(type);
    }
 	// 显示文字最大字数
    function showTextLimit(type,value){
    	if(type==1){
        	$(".text_limit").removeAttr("disabled");// enable 
        	if(value){
        		$(".text_limit").val(value);	
        	}        	
        }else{
        	$(".text_limit").attr("disabled","disabled");// disabled
        }
    }
    function closeSetAttributeWindoww() {
        $('#setAttributeWindow,.tanchu_black').hide();
    }
    $(".delete_close,.close_none").click(function() {
        $('#setAttributeWindow,.tanchu_black').hide();
    });
    // 设置类型
    function setAttributeOfNode(){
        var type = $('.type_list').val();
        var text_limit = parseInt($(".text_limit").val());
        if(setAttributeCallback){
        	setAttributeCallback(type,text_limit);
        }
    }
</script>
<!-- 题纲模式－－设置属性弹窗 end -->




<script type="text/javascript" src="./brainmind/jsmind.js"></script>
<!-- <script type="text/javascript" src="./brainmind/jsmind.draggable.js"></script>-->
<script type="text/javascript">


	//题纲编辑器－－设置可选项和保留项 -----------------------------------start
	// 选中节点时的回调
	function setSelectNodeOptAndPreToUI(node){
		if(node){
			if(node.o){
				$('#optional').attr("checked", "checked");	
			}else{
				$('#optional').removeAttr("checked");	
			}
						
			if(node.p){
				$('#preserve').attr("checked", "checked");	
			}else{
				$('#preserve').removeAttr("checked");	
			}
		}
	}
	
	// optional的checkbox变化后更新节点信息
	function optionalChange(THIS){
		var t = $(THIS);
		var c = 0;
		if(t.is(':checked')){
			c = 1;	
		}
		jm.setSelectNodeOptional(c);
	}
	// preserve的checkbox变化后更新节点信息
	function preserveChange(THIS){
		var t = $(THIS);
		var c = 0;
		if(t.is(':checked')){
			c = 1;	
		}
		jm.setSelectNodePreserve(c);
	}
	// 题纲编辑器－－设置可选项和保留项 -----------------------------------end
	// 分页编辑器－－设置节点的分页 -----------------------------------start
	function initPageList(pageCount){
		var t = $('#pageNumberList'); 
		t.html('');
		if(pageCount==1){
			t.append('<li><input type="checkbox" name="0" value="0" onchange="pageCheckChange(this)">第1页</input></li>');
			t.append('<li><input type="checkbox" name="-1" value="-1" onchange="pageCheckAllChange(this)">全选</input></li>');
		}else if(pageCount>1){
			for(var p=0;p<pageCount;p++){
				t.append('<li><input type="checkbox" name="'+p+'" value="'+p+'" onchange="pageCheckChange(this)">第'+(p+1)+'页</input></li>');
			}
			t.append('<li><input type="checkbox" name="-1" value="-1" onchange="pageCheckAllChange(this)">全选</input></li>');
		}
	};
	initPageList(5);
	
	// 清除界面上的选中状态
	function clearUIPageIndexs(){
		var t = $('#pageNumberList').find('li input');
		for(var p=0;p<t.length;p++){
			var o = t.eq(p);
			if(o.is(':checked') ){
				o.removeAttr("checked");	
			}
		}
	}
	
	// 设置节点的选中的页到版面上
	function setSelectNodePageIndexToUI(node){
		clearUIPageIndexs();
		var t = $('#pageNumberList'); 
		if(node.hasOwnProperty('relations')){
			for(var p=0;p<node.relations.length;p++){
				var ck = t.find('li input').eq(node.relations[p].page_index);
				ck.attr("checked", "checked");
			}
		}else{
			if(node.page_index){
				var ck = t.find('li input').eq(node.page_index);
				ck.attr("checked", "checked");
			}
		}
	}
	
	// 取得所有选中的pageIndex的数组
	function getSelectPageIndexs(){
		var ret = [];
		var t = $('#pageNumberList').find('li input');
		for(var p=0;p<t.length;p++){
			var o = t.eq(p);
			if(o.is(':checked') && o.val()>=0){
				ret.push(o.val()*1);
			}
		}
		return ret;
	}
	
	// 选中页
	function pageCheckChange(THIS){
		var t = $(THIS);
		if(t.is(':checked')){
			
			var v = getSelectPageIndexs();
			jm.setSelectNodePageIndexs(v);
		}else{
			// 清空选中节点的pageIndex
			jm.setSelectNodePageIndexs([]);
		}
	}
	// 全选所有页
	function pageCheckAllChange(THIS){
		var l = $('#pageNumberList').find('li input');
		var t = $(THIS);
		if(t.is(':checked')){
			l.attr("checked", "checked");	
			var v = getSelectPageIndexs();
			jm.setSelectNodePageIndexs(v);
		}else{
			l.removeAttr("checked");
			// 清空选中节点的pageIndex
			jm.setSelectNodePageIndexs([]);
		}
	}
	// 分页编辑器－－设置节点的分页 -----------------------------------end
	
	// test
	function test(){
		 var tree = jm.mind_2_tree();
			console.log("jm.mind_2_tree() is:\n"+JSON.stringify(tree)+"\n");
			
			if(tree.version==3){
				// 版本3的转换方式			
				var tg =new SJGTGV3();
		        tg.fromJson(tree,3); //tg.addTestData();
		     	var m_template = TGToDocUtilV3.convert(tg);
		        console.log(m_template.body.toJsonPages4DB());	
			}else if(tree.version<3){
				// 版本1\2的转换方式			
				var tg =new SJGTG();
		        tg.fromJson(tree,0); //tg.addTestData();
		     	var m_template = TGToDocUtil.convert(tg);
		        console.log(m_template.body.toJsonPages4DB());	
			}else{
				console.log('tree.version error:!\n');
			}
	     	
	}
	
	// 加载数据
	var jm = null;
    function load_jsmind(){
		// 版本1、版本2的测试数据
        //var tree = {"version":"1","name":"333","root":{"id":"1","topic":"会议邀请函","type":1,"kind":0,"page_index":null,"value":null,"obj_id":null,"children":[{"id":"11","topic":"会议名称","type":1,"kind":3,"page_index":0,"value":{"ct":808,"type":20,"id":0,"value":"第五届国际互联网大会","min":0,"max":10},"obj_id":null,"children":[]},{"id":"12","topic":"会议图片","type":2,"kind":3,"page_index":1,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"an":0,"w":100,"h":100}},"obj_id":null,"children":[]},{"id":"13","topic":"邀请嘉宾","type":1,"kind":1,"page_index":2,"value":{"ct":808,"type":20,"id":0,"value":"邀请嘉宾","min":0,"max":10},"obj_id":null,"children":[{"id":"131","topic":"嘉宾1","type":1,"kind":2,"page_index":2,"value":{"ct":808,"type":20,"id":0,"value":"嘉宾1","min":0,"max":10},"obj_id":null,"children":[{"id":"1311","topic":"名称1","type":1,"kind":3,"page_index":2,"value":{"ct":808,"type":20,"id":0,"value":"王先生","min":0,"max":10},"obj_id":null,"children":[]},{"id":"1312","topic":"头像1","type":2,"kind":3,"page_index":2,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"an":0,"w":100,"h":100}},"obj_id":null,"children":[]}]},{"id":"132","topic":"嘉宾2","type":1,"kind":2,"page_index":2,"value":{"ct":808,"type":20,"id":0,"value":"嘉宾2","min":0,"max":10},"obj_id":null,"children":[{"id":"1321","topic":"名称2","type":1,"kind":3,"page_index":2,"value":{"ct":808,"type":20,"id":0,"value":"王先生","min":0,"max":10},"obj_id":null,"children":[]},{"id":"1322","topic":"头像2","type":2,"kind":3,"page_index":2,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"an":0,"w":100,"h":100}},"obj_id":null,"children":[]}]}]}]}};
		
     	// 版本3的测试数据
		var tree = {"version":"3","root":{"kind":0,"obj_id":null,"value":null,"children":[{"kind":3,"obj_id":null,"value":{"min":0,"max":10,"value":"第五届国际互联网大会","type":20,"id":0,"ct":808},"children":[],"topic":"会议名称","page_index":0,"relations":[{"page_index":0,"obj_id":null},{"page_index":1,"obj_id":null}],"type":1,"id":"11"},{"kind":3,"obj_id":null,"value":{"pos":{"h":100,"an":0,"w":100,"y":0,"x":0,"ct":2},"type":30,"id":0,"value":"http://itbour-generate.img-cn-hangzhou.aliyuncs.com/image/U10/2016/09/22/161121182_6SMbTjIIz6c1AJ0KEZos/0.jpg","ct":805},"children":[],"topic":"会议图片","page_index":1,"relations":[{"page_index":1,"obj_id":null}],"type":2,"id":"12"},{"kind":1,"obj_id":null,"value":{"min":0,"max":10,"value":"邀请嘉宾","type":20,"id":0,"ct":808},"children":[{"kind":2,"obj_id":null,"value":{"min":0,"max":10,"value":"嘉宾1","type":20,"id":0,"ct":808},"children":[{"kind":3,"obj_id":null,"value":{"min":0,"max":10,"value":"王先生","type":20,"id":0,"ct":808},"children":[],"topic":"名称1","page_index":2,"relations":[{"page_index":2,"obj_id":null}],"type":1,"id":"1311"},{"kind":3,"obj_id":null,"value":{"pos":{"h":100,"an":0,"w":100,"y":0,"x":0,"ct":2},"type":30,"id":0,"value":"http://itbour-generate.img-cn-hangzhou.aliyuncs.com/image/U10/2016/09/22/161121182_6SMbTjIIz6c1AJ0KEZos/0.jpg","ct":805},"children":[],"topic":"头像1","page_index":2,"relations":[{"page_index":2,"obj_id":null}],"type":2,"id":"1312"}],"topic":"嘉宾1","page_index":2,"relations":[{"page_index":2,"obj_id":1}],"type":1,"id":"131"},{"kind":2,"obj_id":null,"value":{"min":0,"max":10,"value":"嘉宾2","type":20,"id":0,"ct":808},"children":[{"kind":3,"obj_id":null,"value":{"min":0,"max":10,"value":"王先生","type":20,"id":0,"ct":808},"children":[],"topic":"名称2","page_index":2,"relations":[{"page_index":2,"obj_id":1}],"type":1,"id":"1321"},{"kind":3,"obj_id":null,"value":{"pos":{"h":100,"an":0,"w":100,"y":0,"x":0,"ct":2},"type":30,"id":0,"value":"http://itbour-generate.img-cn-hangzhou.aliyuncs.com/image/U10/2016/09/22/161121182_6SMbTjIIz6c1AJ0KEZos/0.jpg","ct":805},"children":[],"topic":"头像2","page_index":2,"relations":[{"page_index":2,"obj_id":1}],"type":2,"id":"1322"}],"topic":"嘉宾2","page_index":2,"relations":[{"page_index":2,"obj_id":1}],"type":1,"id":"132"}],"topic":"邀请嘉宾","page_index":2,"relations":[{"page_index":2,"obj_id":1}],"type":1,"id":"13"}],"topic":"会议邀请函","page_index":null,"relations":[],"type":1,"id":"1"},"name":"333"};
     	
     	// 版本号显示
		$('#version_p').html(tree.version);
     	
        var options = {
            edit_mode:3,// 题纲编辑器的工作模式:1题纲模版模式\2题纲模式\3分页模式
            container:'jsmind_container',
            editable:true,
            theme:'greensea',
            callbacks:{
                message :function(_msg,_alert){console.log(_msg);if(_alert) alert(_msg);},
                select:function(node){
                	setSelectNodeOptAndPreToUI(node);
                	setSelectNodePageIndexToUI(node);
                },
                add_group:function(node, _callback){
                	showGroupWindow(node,function(p){
                		
                    	_callback(node, p);                		
                	});
                },
                /* add_page :function(node, cp, _callback){
                    showPageWindow(cp,5,function(p){
                        _callback(node,p)
                    });

                }, */
                add_attribute :function(node, _callback){
                	showSetAttributeWindow(node, function(type,text_limit){
                		// 修改node
                		//todo：需要细化，这里暂时使用默认值
                		node.type = type;
                		
                		_callback(node,text_limit);
                	});
                },
            }
        }
        jm = jsMind.show_tree(options,tree);
        var ie8=true;
        if(ie8){
            jm.view.relayout();
        }

//		测试：直接画线
//      var pin={x:10,y:20},pout={x:200,y:300},offset={x:100,y:200};
//      jm.view.draw_line(pin,pout,offset);


		// 将树转换成文档
        var tree = jm.mind_2_tree();
		console.log("jm.mind_2_tree() is:\n"+JSON.stringify(tree)+"\n");
		
		
        
        // 根据模式显示右侧编辑区域内容
        (function show_mode_div(mode){
        	
    		
        	if(mode==2){
        		$('#tg_div').show();
        	}else if(mode==3){
        		$('#map_div').show();	
        	}
        	
        })(options.edit_mode);
        
        

        function get_selected_nodeid(){
            var selected_node = jm.get_selected_node();
            if(!!selected_node){
                return selected_node.id;
            }else{
                return null;
            }
        }
        function remove_node(){
            var selected_id = get_selected_nodeid();
            if(!selected_id){   return; }

            jm.remove_node(selected_id);
        }
        function add_node(){
            var selected_node = jm.get_selected_node(); // as parent of new node
            if(!selected_node){   return; }

            var nodeid = jsMind.util.uuid.newid();
            var topic = '新节点';
            var node = jm.add_node(selected_node, nodeid, topic);
        }



        function move_to_first(){
            var selected_id = get_selected_nodeid();
            if(!selected_id) return;

            jm.move_node(selected_id,'_first_');
        }

        function move_to_last(){
            var selected_id = get_selected_nodeid();
            if(!selected_id) return;

            jm.move_node(selected_id,'_last_');
        }
        function up(){
            var selected_node = jm.get_selected_node();
            if(!selected_node)  return false;

            if(selected_node.isroot)    return false;
            if(selected_node.parent.children.length<2)  return false;

            if(selected_node.index==1)  return false;
            var prev = selected_node.parent.children[selected_node.index-2];
            jm.move_node(selected_node.id, prev.id, selected_node.parent.id, selected_node.direction);
        }
        function down(){
            var selected_node = jm.get_selected_node();
            if(!selected_node)  return false;

            if(selected_node.isroot)    return false;
            if(selected_node.parent.children.length<2)  return false;

            if(selected_node.index==selected_node.parent.children.length)  return false;
            if(selected_node.index==selected_node.parent.children.length-1){
                jm.move_node(selected_node.id,'_last_');
            }else{
                var prev = selected_node.parent.children[selected_node.index+1];
                jm.move_node(selected_node.id, prev.id, selected_node.parent.id, selected_node.direction);
            }
        }



        //---------context menu start---------
        // 处理菜单的点击事件
        function processMenuClick(key){
            switch(key){
                case "move_to_first":
                    move_to_first();
                    break;
                case "move_to_last":
                    move_to_last();
                    break;
                case "up":
                    up();
                    break;
                case "down":
                    down();
                    break;
                case "add":
                    add_node();
                    break;
                case "delete":
                    remove_node();
                    break;
                default:
                    break;
            }
        }
        // 初始化页列表的右键
        function initContextMenu(){
//            $.contextMenu({
//                selector: '.context-menu-one',
//                callback: function(key,options) {
//                    processMenuClick(key);
//                },
//                items: {
//                    "up": { name: "上移",icon: "up" },
//                    "down": { name: "下移",icon: "down" },
//                    "move_to_first": { name: "上移到顶",icon: "up" },
//                    "move_to_last": { name: "下移到底",icon: "down" },
//                    "sep1": "---------",
//                    "add": { name: "添加",icon: "add" },
//                    "delete": { name: "删除",icon: "delete" },
//
//                }
//            });
//
//            $('.context-menu-one').on('click',function(e) {
//                //console.log('clicked',this);
//            })
        }
        //initContextMenu();
        //---------context menu end---------
    }

    load_jsmind();




</script>
</body>
</html>